profile tweaks

3 files changed, 50 insertions, 26 deletions

diff --git a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
index 6b9fb2c6..77e7ab73 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_account.svelte
@@ -53,21 +53,25 @@
 			$bannerUpload = { file, type, progress };
 		}
 	};
+
+	if (!user.display) user.display = user.username;
 </script>
 
-<!-- <div> -->
-<!-- 	<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label> -->
-<!-- 	<input type="text" name="username" bind:value={user.username} /> -->
-<!-- </div> -->
+<div class="relative">
+	<div>
+		<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label>
+		<input type="text" name="username" bind:value={user.username} />
+	</div>
+	<div
+		class="absolute right-[2px] top-[30px] text-gray-600 rounded-r-2xl p-4 h-[54px] my-auto border-l "
+	>
+		@coinos.io
+	</div>
+</div>
 
 <div>
-	<label for="address" class="font-bold mb-1 block">{$t('user.settings.about')}</label>
-	<textarea
-		type="text"
-		name="address"
-		bind:value={user.address}
-		placeholder={$t('user.settings.aboutPlaceholder')}
-	/>
+	<label for="display" class="font-bold mb-1 block">{$t('user.settings.displayName')}</label>
+	<input type="text" name="display" bind:value={user.display} />
 </div>
 
 <div>
@@ -182,3 +186,13 @@
 		<div class="text-red-600">Max file size 10MB</div>
 	{/if}
 </div>
+
+<div>
+	<label for="address" class="font-bold mb-1 block">{$t('user.settings.about')}</label>
+	<textarea
+		type="text"
+		name="address"
+		bind:value={user.address}
+		placeholder={$t('user.settings.aboutPlaceholder')}
+	/>
+</div>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
index bade7a99..e9fcc5ba 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Icon, LocaleSelector } from '$comp';
+	import { Icon, LocaleSelector, Toggle } from '$comp';
 	import { t } from '$lib/translations';
 	import { success, failure } from '$lib/utils';
 	import { page } from '$app/stores';
@@ -21,3 +21,13 @@
 		{/each}
 	</select>
 </div>
+
+<div>
+	<div class="flex justify-between items-center">
+		<span class="font-bold">{$t('user.settings.tipPrompt')}</span>
+		<Toggle id="sms-notify" />
+	</div>
+	<p class="text-secondary mt-1 w-9/12">
+		{$t('user.settings.tipPromptDescription')}
+	</p>
+</div>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
index 4d175025..cf969f1c 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_security.svelte
@@ -189,20 +189,6 @@
 </div>
 
 <div>
-	<label for="locktime" class="font-bold mb-1">{$t('user.settings.autoLock')}</label>
-	<p class="text-secondary mb-1">
-		{$t('user.settings.autoLockDescription')}
-	</p>
-	<select name="locktime" class="select-styles block py-3 w-full" value={parseInt(user.locktime)}>
-		<option value={5 * 60}>5 {$t('user.settings.minutes')}</option>
-		<option value={10 * 60}>10 {$t('user.settings.minutes')}</option>
-		<option value={30 * 60}>30 {$t('user.settings.minutes')}</option>
-		<option value={60 * 60}>1 {$t('user.settings.hour')}</option>
-		<option value={8 * 60 * 60}>8 {$t('user.settings.hours')}</option>
-	</select>
-</div>
-
-<div>
 	<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
 	<p class="text-secondary mb-4">
 		{$t('user.settings.twofaDescription')}
@@ -252,3 +238,17 @@
 		</button>
 	{/if}
 </div>
+
+<div>
+	<label for="locktime" class="font-bold mb-1">{$t('user.settings.autoLock')}</label>
+	<p class="text-secondary mb-1">
+		{$t('user.settings.autoLockDescription')}
+	</p>
+	<select name="locktime" class="select-styles block py-3 w-full" value={parseInt(user.locktime)}>
+		<option value={5 * 60}>5 {$t('user.settings.minutes')}</option>
+		<option value={10 * 60}>10 {$t('user.settings.minutes')}</option>
+		<option value={30 * 60}>30 {$t('user.settings.minutes')}</option>
+		<option value={60 * 60}>1 {$t('user.settings.hour')}</option>
+		<option value={8 * 60 * 60}>8 {$t('user.settings.hours')}</option>
+	</select>
+</div>